<template>
  <el-select
    v-model="_value"
    allow-create
    :disabled="disabled"
    clearable
    filterable
    placeholder="请选择代理"
    :style="'width: 100%; max-width: ' + maxWidth"
    @change="change"
  >
    <el-option v-for="(item, index) in list" :key="index" :value="item[field]" :label="getLabel(item)" />
  </el-select>
</template>

<script>
import {
  ExtensionProxyList
} from '@/api/customAPI/shop/ExtensionManagement'
export default {
  name: 'ExtensionProxySelect',
  props: {
    field: {
      type: String,
      default: 'id'
    },
    maxWidth: {
      type: String,
      default: '400px'
    },
    value: {
      type: [String, Number, Object, Array],
      default: undefined
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: []
    }
  },
  computed: {
    _value: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getLabel(item) {
      const label = item.name
      let type = ''
      if (item.type == 'store') {
        type = ' - 门店代理'
      } else if (item.type == 'extension') {
        type = ' - 推广代理'
      }
      return label + type
    },
    change(value) {
      const vm = this
      vm.$emit('change', vm._value)
    },
    getList() {
      const vm = this

      ExtensionProxyList({
        shopId: localStorage.getItem('shopId'),
        keySearch: '',
        page: 1,
        limit: 0
      })
        .then(res => {
          vm.list = res.data.data
          vm._value = null
          vm.$emit('change', vm._value)
          console.log(vm.list)
        })
        .catch(res => {
          if (res && res.data && res.data.errno !== 0) {
            this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
          }
        })
    }

  }
}
</script>

<style scoped>

</style>
